/*
 * @Author: zhangyujie
 * @Date:   2015-08-12 10:45:07
 * @Last Modified by:   zhangyujie
 * @Last Modified time: 2015-08-14 13:14:35
 */
define(['jquery', 'd3', 'bubble','bubble'], function($, d3, bubble, setting) {
	function multipleRing() {
		var i = 0, ele
		var setting = {
			selector: '#three_3',
			name: 'CRM',
			series:config,
			margin: {
				top: 10,
				right: 10,
				left: 20,
				bottom: 10
			},
			colorset: ['#8F8F8F', '#F4F4F4', '#DBDBDB', '#C2C2C2'],
			textStyle: {
				fontSize: '12',
				fontWeight: '600',
				color: '#666666'
			},
			radius: 130,
			smallRadius: 90,
			innerArcColor: '#ECECEC',
			outterArcColor: '#74B9F9',
			nameStyle: {
				fontSize: '30',
				fontWeight: '600',
				color: '#919191'
			},
			arcClick: function(d, i, that) {
				d3.select('.arc.selected').classed('selected', false)
				that.classed('selected', true)
				var type;
				if(i==1){
					type=0;
				}else if(i==0){
					type=1;
				}else if(i==2){
					type=2;
				}else{
					type=3;
				}
				$.get("/api/manager/minecustomer/getRelationCustomerDetail",{relatedUser:customer_id,consultType:type},function(data){
					ele=bubble.bubble.setting;
					for(i=0;i<6;i++){
						if(data.data[i]==null){
							ele.series[i].value=0;
						}else{
							ele.series[i].value=data.data[i].number;
						}
					}
					bubble.bubble.bubble(bubble.bubble.setting)
				});
				/*for (i = 0; i < bubble.bubble.setting.series.length; i++) {

					ele = bubble.bubble.setting.series[i]

					ele.value = Number((Math.random() * 100 + 50).toFixed(0))

				}*/


			}

		}
		$.get("/api/manager/minecustomer/getRelationCustomerDetail",{relatedUser:customer_id,consultType:0},function(data){
			ele=bubble.bubble.setting;
			for(i=0;i<6;i++){
				if(data.data[i]==null){
					ele.series[i].value=0;
				}else{
					ele.series[i].value=data.data[i].number;
				}
			}
			bubble.bubble.bubble(bubble.bubble.setting)
		});
		three_3(setting)

		function three_3(setting) {

			var selector = setting.selector,
				series = setting.series,
				name = setting.name,
				colorset = setting.colorset,
				margin = setting.margin,
				width = document.querySelector(selector).offsetWidth,
				height = document.querySelector(selector).offsetHeight,
				smallRadius = setting.smallRadius,
				radius = setting.radius,
				innerRadius = 0.3 * radius,
				smallInnerRadius = 0.4 * smallRadius,
				startAngle = 0,
				endAngle = 2 * Math.PI,
				sum = 0,
				innerArcColor = setting.innerArcColor,
				outterArcColor = setting.outterArcColor,
				textStyle = setting.textStyle,
				nameStyle = setting.nameStyle

			var svg = d3.select(selector)
				.append('svg')
				.attr('width', width)
				.attr('height', height)
				//.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')

			var con = svg.append('g')
				.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')

			for (var i = 0; i < series.length; i++) {

				sum += series[i].value
			}

			var pie = d3.layout.pie()
				.sort(null)
				.startAngle(startAngle)
				.endAngle(endAngle)
				.value(function(d) {

					return d.value
				})

			var sArc = d3.svg.arc()
				.innerRadius(smallInnerRadius)
				.outerRadius(smallRadius)

			var oArc = d3.svg.arc()
				.innerRadius(smallRadius + 20)
				.outerRadius(radius)

			var temp = con.selectAll('.innerArc')
				.data(pie(series))
				.enter()
				.append('g')
				.attr('class', 'arc')
				.attr('fill', function(d, i) {

					return colorset[i]
				})
				.call(bindEvent)
			var innerPath = temp
				.append('path')

			.attr('class', 'innerArc')
				.attr('d', sArc)


			var outerPath = temp
				.append('path')

			.attr('class', 'outArc')
				.attr('d', oArc)

			var innerText = con.selectAll('.innerText')
				.data(pie(series))
				.enter()
				.append('text')
				.attr('class', 'innerText')
				.attr('transform', function(d) {

					return 'translate(' + sArc.centroid(d) + ')'
				})
				.attr('dy', '.35em')
				.style('text-anchor', 'middle')
				.text(function(d) {
					return d.data.name
				})
				.style('fill', textStyle.color)
				.style('font-size', textStyle.fontSize)

			var outerText = con.selectAll('.outerText')
				.data(pie(series))
				.enter()
				.append('text')
				.attr('class', 'outerText')
				.attr('transform', function(d) {

					return 'translate(' + oArc.centroid(d) + ')'
				})
				.attr('dy', '.35em')
				.style('text-anchor', 'middle')
				.text(function(d) {

					return ((d.data.value * 100 / sum).toFixed(0)) + '%'
				})
				.style('fill', textStyle.color)
				.style('font-size', textStyle.fontSize)

			// 画外侧小圆边
			con.append('circle')
				.attr('cx', 0)
				.attr('cy', 0)
				.attr('r', smallRadius + 10)
				.attr('fill', 'none')
				.attr('stroke', outterArcColor)
				.attr('stroke-width', '2')

			// 内侧小圆
			con.append('circle')
				.attr('cx', 0)
				.attr('cy', 0)
				.attr('r', smallInnerRadius + 6)
				.attr('fill', 'none')
				.attr('stroke', innerArcColor)
				.attr('stroke-width', '2')

			con.append('text')
				.attr('x', 0)
				.attr('y', 0)
				.text(name)
				.attr('text-anchor', 'middle')
				.attr('dy', '0.35em')
				.style('font-size', nameStyle.fontSize)
				.style('font-weight', nameStyle.fontWeight)
				.style('fill', nameStyle.color)

			function bindEvent(arc) {

				arc.on('click', function(d, i) {

						setting.arcClick && setting.arcClick(d, i, d3.select(this))
					})
					.on('mousedown', function(d, i) {
						setting.arcClick && setting.arcClick(d, i, d3.select(this))
					})
					.on('touchend', function(d, i) {
						setting.arcClick && setting.arcClick(d, i, d3.select(this))
					})
			}
		}
	}

	return {
		multipleRing:multipleRing
	}

})